<template>
  <div class="box2">
    <div class="title">
      <p>销售</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <!-- 图形图标的容器 -->
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
//引入echarts
import * as echarts from "echarts";
import { RobotApi } from "@/api/map/monitorcount";
let charts = ref();
//组件挂载完毕初始化图形图标
onMounted(async () => {
  let mychart = echarts.init(charts.value);
  // 初始化 series
  const series = [
    {
      name: "导览",
      type: "bar",
      stack: "总量",
      data: [], // 初始化为空数组
      barWidth: "40",
      barCategoryGap: "40",
      itemStyle: {
        color: "#24CDDC",
      },
    },
    {
      name: "还书",
      type: "bar",
      stack: "总量",
      data: [], // 初始化为空数组
      barWidth: "40",
      barCategoryGap: "40",
      itemStyle: {
        color: "#2A89FE",
      },
    },
    {
      name: "盘点",
      type: "bar",
      stack: "总量",
      data: [], // 初始化为空数组
      barWidth: "40",
      barCategoryGap: "40",
      itemStyle: {
        color: "#B471FD",
      },
    },
  ];
  const res = await RobotApi.getRobotCount();
  // 遍历 res 并填充 series 的 data
  res.forEach((task) => {
    if (task.name === "导览") {
      series[0].data.push(task[1], task[2], task[3], task[4], task[5]); // 填充导览数据
    } else if (task.name === "还书") {
      series[1].data.push(task[1], task[2], task[3], task[4], task[5]); // 填充还书数据
    } else if (task.name === "盘点") {
      series[2].data.push(task[1], task[2], task[3], task[4], task[5]); // 填充盘点数据
    }
  });
  console.log(res, "getRobotCount");
  // 设置图表配置
  var option = {
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis", // 鼠标悬停时触发提示框
      axisPointer: {
        type: "none", // 使用阴影效果
      },
      backgroundColor: "transparent", // 设置背景透明
      borderColor: "rgba(41, 252, 255, 0.3)", // 使用较浅的边框颜色
      borderWidth: 2, // 设置边框宽度
      textStyle: {
        color: "#fff", // 设置文字颜色
        fontSize: 14, // 设置字体大小
      },
      padding: [5, 10], // 设置 tooltip 内边距

      formatter: function (params: any[]) {
        let total = 0;
        params.forEach((item) => {
          total += item.value;
        });
        let tooltipStr = `${params[0].name}<br/>`;
        params.forEach((item) => {
          let percentage = ((item.value / total) * 100).toFixed(2); // 计算百分比
          // 保留默认图例标记（系列名称 + 显示颜色块）
          tooltipStr += `<span style="color:${item.color}">●</span> ${item.seriesName}: ${percentage}%<br/>`;
        });
        return tooltipStr;
      },
    },
    legend: {
      data: ["盘点", "还书", "寻览"],
      top: "5%", // 图例显示在顶部
      left: "5%",
      itemWidth: 12, // 设置图例标识符的宽度
      itemHeight: 12, // 设置图例标识符的高度
      textStyle: {
        color: "#ffffff", // 设置字体颜色
        fontSize: 12, // 设置字体大小标题文字为白色
      },
    },
    grid: {
      left: "15%",
      right: "15%",
      top: "15%",
      bottom: "20%",
      containLabel: false,
    },
    xAxis: {
      type: "category",
      data: ["华东", "华西", "华南", "华北", "华中"], // x轴数据
      axisLabel: {
        margin: 12, // 将 x 轴标签下移 20px
        interval: 0, // 保证所有x轴标签都显示
        color: "#fff",
      },
      axisLine: { show: false }, // 去除x轴的线条
      axisTick: { show: false }, // 去除x轴的刻度
    },
    yAxis: {
      type: "value",
      show: false,
      min: 0,
      // 动态计算最大值（关键修改）
      max: function (value) {
        // 计算实际数据中的最大值
        let dataMax = Math.max(...series.flatMap((s) => s.data));
        // 确保最小高度（即使数据很小也要有基础高度）
        const minHeight = 1;
        // 计算最大值：实际最大值的1.2倍，但不低于minHeight
        return Math.max(dataMax * 1.2, minHeight);
      },
    },
    series: series,
  };
  mychart.setOption(option);
});
</script>

<style scoped lang="scss">
.box2 {
  margin-top: 10px;
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-lt.png) no-repeat;
  background-size: 100% 91.5%;

  .title {
    margin-left: 20px;
    p {
      color: white;
      font-size: 20px;
    }
  }

  .charts {
    height: 260px;
  }
}
</style>
